import Vue from 'vue'
import Vuex from 'vuex'
import { get_song_detail } from "../api/common";

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 使用 play_state 来表示音频的播放状态
    play_state: false,
    // 表示当前正在播放的音频相关信息
    song_info: {
      ars: []
    },
    // 表示当前播放列表 id 集合;
    play_list: [],
    // 表示当前播放歌曲的下标(第几首)
    song_idx: 0,
    current_song_info: {
      current_time: 0,
      // duration 大于0 ,防止滑块初始状态在最右边
      duration: 1
    }
  },
  mutations: {
    change_current_song(state, info_obj) {
      state.current_song_info = info_obj
    },
    change_state(state, is_playing) {
      // 通过 is_playing 来设置音频的播放状态
      state.play_state = is_playing;
    },
    set_song_info(state, info) {
      state.song_info = info;
    },
    // 设置 播放列表
    set_play_list(state, list) {
      state.play_list = list
    },
    change_idx(state, val) {
      state.song_idx = val
    }
  },
  actions: {
    async get_song_detail(context, id) {
      let song_detail = await get_song_detail(id);
      let current_song = song_detail.data.songs[0];
      let song_info = {
        album_name: current_song.al.name,
        ars: current_song.ar,
        id: current_song.id,
        picUrl: current_song.al.picUrl,
        song_name: current_song.name,
      };
      console.log(song_info);
      // 将当前音频的相关信息存至 store, 歌名 ar id
      // 注: 点击播放时, 会将播放列表切换至当前歌曲的所在歌单, 方便后面做上一首,下一首的切换;
      context.commit("set_song_info", song_info);
    }
  },
  modules: {
  }
})
